<template>
  <div class="detail-bottom-box">
    <van-cell-group>

      <van-cell
        class="chat-container c-padding"
        @click="onClickPreviewChat"
      >
        <template slot="title">
          <span class="chat-container-title">群信息详情</span>
        </template>
        <div class="chat-container-shot">
          <template v-for="(item, index) in list.chatRecordShot">
            <canvas
              width="61"
              height="61"
              class="chat-container-shot-img"
              :data-src="item"
              ref="groupCanvas"
            ></canvas>
          </template>
        </div>
        <div class="chat-container-label">
          <template v-for="(item, index) in list.label">
            <span>{{ item }}</span>
          </template>
        </div>
      </van-cell>

      <van-cell>
        <template slot="title">
          <span class="chat-container-title">群成员数量</span>
        </template>
        <span class="chat-container-info">
          {{ list.groupMemberNumber }} 人
        </span>
      </van-cell>

      <van-cell>
        <template slot="title">
          <span class="chat-container-title">发布人身份</span>
        </template>
        <span class="chat-container-info">
          {{ list.PublisherIdentity }}
        </span>
      </van-cell>

      <van-cell>
        <template slot="title">
          <span class="chat-container-title">进群条件</span>
        </template>
        <span class="chat-container-info">
          {{ list.groupRequire }}
        </span>
      </van-cell>
    </van-cell-group>

    <van-button
      v-if="!list.isBuy"
      class="enter-group"
      size="large"
      @click="onClickEnterGroup"
    >
      支付{{ list.price }}多多币，查看完成信息
    </van-button>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    List,
    Icon,
    Popup,
    Dialog,
    ImagePreview
  } from 'vant';
  import { gaussBlur } from '../../../static/js/gauss-blur.js';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [List.name]: List,
      [Icon.name]: Icon,
      [Popup.name]: Popup,
      [Dialog.name]: Dialog,
      [ImagePreview.name]: ImagePreview,
    },
    data() {
      return {
        list: ''
      }
    },
    mounted() {
      // 父级传过来的值
      this.list = this.$parent.list;

      // list.chatRecordShot
      let $this = this;
      setTimeout(function() {
        for(let i = 0, len = $this.list.chatRecordShot.length; i < len ; i ++) {
          $this.canvasImg($this, i);
        }
      },1000);
    },
    methods: {
      onClickEnterGroup() {
        // 点击进群
        this.$parent.isInfoDialogShow = !this.$parent.isInfoDialogShow;
      },
      onClickPreviewChat() {
        // ImagePreview(this.list.chatRecordShot);
      },
      onClickPreviewGroup() {
        // ImagePreview([this.list.groupMember]);
      },
      canvasImg($this, index) {
        // 二维码模糊
        let groupCanvas = $this.$refs.groupCanvas[index];
        let setCanvas = groupCanvas.getContext('2d');
        var yImg = new Image();
        yImg.src = $this.list.qcImg;
        yImg.onload = function() {
          setCanvas.drawImage(yImg, 0, 0, 61, 61);
          // 模糊操作
          if(!$this.list.isBuy) {
            let data = setCanvas.getImageData(0, 0, 61, 61);
            let emptyData = gaussBlur(data);
            setCanvas.putImageData(emptyData, 0, 0);
          }
        }
        // 二维码模糊  ---- end
      }
    }
  }
</script>

<style scoped="scoped">
.qr-container {
  height: 81px;
}
.qr-txt {
  line-height: 61px;
}
.chat-container-title {
  font-size: 15px;
  line-height: 30px;
  color: #000;
}
.group-img {
  width: 61px;
  height: 61px;
}
.chat-container {
  display: flex;
  flex-direction: column;
}
.chat-container-shot {
  text-align: left;
  margin-top: 15px;
}
.chat-container-shot-img {
  width: 61px;
  height: 61px;
  margin-right: 5px;
  border-radius: 5px;
}
.chat-container-label {
  margin-top: 15px;
  text-align: left;
  color: #fff;
  white-space: normal;
  word-break: keep-all;
}
.chat-container-label span{
  display: inline-block;
  line-height: 18px;
  background:rgba(45,211,154,1);
  border-radius:4px;
  margin: 0 5px 5px 0;
  padding: 0 6px;
  font-size: 12px;
}
.chat-container-info {
  color: #B5B5B5;
}
.enter-group {
  color: #fff;
  background-color: #00BE0C;
  border-radius: 5px;
  margin-top: 10px;
}
</style>